<extend name="Public/base" />
<block name="main">
	<php>
		$types = config('USER_TYPE');
	</php>
	<div class="row">
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-success pull-right"></span>
					<h5>{$types[0]}</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins">{$topData.user}</h1>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>{$types[1]}</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins">{$topData.first}</h1>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>{$types[2]}</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins">{$topData.noFirst}</h1>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>用户比例</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-12">
							<div class="chart">
								<div id="echarts-pie-chart" style="height: 300px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>近一个月用户注册统计</h5>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-12">
							<div class="chart">
								<div id="statistics" style="height: 300px;"></div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</block>
<block name="js">
	<script src="__PUBLIC__/dist/js/plugins/echarts/echarts-all.js"></script>
	<script>
		var res = {$res};
		var pie = echarts.init(document.getElementById("echarts-pie-chart"));
		var data = ["{$types[0]}", "{$types[1]}", "{$types[2]}"];
		var option = {
			title: {
				text: "",
				x: "center"
			},
			toolbox: {
				show: true,
				feature: {
					saveAsImage: {
						show: true
					}
				}
			},
			tooltip: {
				trigger: "item",
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				orient: "vertical",
				x: "left",
				data: data
			},
			calculable: !0,
			series: [{
				name: "用户比例",
				type: "pie",
				radius: "65%",
				center: ["50%", "50%"],
				data: [{
					value: Number("{$topData.user}"),
					name: "{$types[0]}"
				}, {
					value: Number("{$topData.first}"),
					name: "{$types[1]}"
				}, {
					value: Number("{$topData.noFirst}"),
					name: "{$types[2]}"
				}]
			}]
		};
		pie.setOption(option);
		$(window).resize(pie.resize);
		var line = echarts.init(document.getElementById('statistics'), 'macarons');
		option = {
			tooltip: {
				trigger: 'axis'
			},
			toolbox: {
				show: true,
				feature: {
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					saveAsImage: {
						show: true
					}
				}
			},
			calculable: true,
			legend: {
				data: data
			},
			xAxis: [{
				type: 'category',
				data: res.time
			}],
			yAxis: [{
				type: 'value',
				name: '人数',
				axisLabel: {
					formatter: '{value}'
				}
			}],
			series: [{
					name: "{$types[0]}",
					type: 'line',
					data: res.barUser
				},
				{
					name: "{$types[1]}",
					type: 'line',
					data: res.barFirst
				},
				{
					name: "{$types[2]}",
					type: 'line',
					data: res.barNoFirst
				}
			]
		};
		line.setOption(option);
	</script>
</block>